import React from 'react';
import { useEffect } from 'react'
import type { FC } from 'react';
import { LeftOutline } from 'antd-mobile-icons'
import { Input } from 'antd-mobile'
import './index.css'
import { useNavigate } from 'react-router-dom'
const Search: FC = ({ }) => {
    // const [state, setstate] = useState();
    const navigate = useNavigate()
    useEffect(() => {

    }, []);
    const list = [
        "阿娇", "小可爱医生", "感冒", "头痛", "神经病", "发烧", "癫痫", "阿莫西林", "脱发", "腿抽筋"
    ]
    return (
        <div className="search-container">
            <div className="search-header">
                <div className="search-header-left" onClick={() => navigate(-1)}>
                    <div className="search-header-left-icon">
                        <LeftOutline width={25} height={25} />
                    </div>
                </div>
                <div className="search-header-center">
                    <div className="search-header-center-input">
                        <Input placeholder='病症、药品名称、医生姓名' />
                    </div>
                </div>
                <div className="search-header-right">
                    搜索
                </div>
            </div>
            <div className="search-main">
                <div className="search-main-title">
                    <h3>热门搜索</h3>
                </div>
                <div className='search-main-center'>
                    {
                        list.map((item, index) => {
                            return <div key={index} className='search-items'>
                                {item}
                            </div>
                        })
                    }
                </div>
            </div>
        </div>
    );
};

export default Search;
